<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-dataType="{scope}">
				<div>
					<span v-if="scope.row.dataType == 0">字符串 </span>
					<span v-if="scope.row.dataType == 1">数组</span>
					<span v-if="scope.row.dataType == 2">键值对</span>
				</div>
			</template>
			<template #table-column-content="{scope}">
				<div class="content">
					{{ scope.row.data }}
				</div>
			</template>
			<template #slot-delete>
				<span style="color:#F12828;padding-left:10px">删除</span>
			</template>
			<template #slot-validate="{scope}">
				<el-form-item
					v-for="(item, index) in scope.vads"
					:key="index"
					:prop="'vads.' + index + '.val'"
					:rules="{ required: true }"
				>
					<el-input v-model="item.val"></el-input>
				</el-form-item>

				<el-button @click="addVad(scope.vads)">添加行</el-button>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			crud: null
		};
	},

	methods: {
		addVad(list) {
			list.push({
				val: 'sadas',
				key: Date.now()
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.systemMenagement.param)
				.set('dict', {
					label: {
						add: '添加'
					}
				})
				.set('table', {
					columns: [
						{
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '数据',
							prop: 'content',
							align: 'center'
						},
						{
							label: '数据类型',
							prop: 'dataType',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						},
						{
							label: 'key',
							prop: 'key',
							align: 'center'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'slot-delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '150px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '键值(key)',
							prop: 'key',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入key'
								}
							},
							rules: [
								{
									required: true,
									message: '键值不能为空',
									trigger: 'blur'
								}
							]
						},
						{
							label: '名称(name)',
							prop: 'name',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入名称'
								}
							},
							rules: [
								{
									required: true,
									message: '名称不能为空',
									trigger: 'blur'
								}
							]
						},
						{
							label: '数据类型(dataType)',
							prop: 'dataType',
							span: 12,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择数据类型'
								},
								options: [
									{
										label: '字符串',
										value: 0
									},
									{
										label: '数组',
										value: 1
									},
									{
										label: '键值对',
										value: 2
									}
								]
							},
							rules: [
								{
									required: true,
									message: '数据类型不能为空',
									trigger: 'blur'
								}
							]
						},
						{
							label: '数据(data)',
							prop: 'data',
							value: '请输入字符串  数组 [{"name":"value"}]  键值对 {"name":"value"}',
							component: {
								name: 'el-input',
								attrs: {
									placeholder:
										'请输入字符串  数组 [{"name":"value"}]  键值对 {"name":"value"}',
									rows: 10,
									type: 'textarea'
								}
							}
						},
						{
							label: '备注(remark)',
							prop: 'remark',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注',
									rows: 5,
									type: 'textarea'
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
<style lang="scss">
.content {
	@include ellipsis(5);
	height: 110px;
}
</style>
